<template>
  <view class="stratview">
    <u-navbar
      title="收藏"
      leftIconColor="#f8f8f8"
      :placeholder="true"
      bgColor="#f8f8f8"
    >
      <template #right>
        <navigator url="/pages/cart/index" open-type="switchTab">
          <image
            class="logo"
            src="/static/cars.jpg"
            style="width: 40rpx; height: 40rpx; margin-right: 20rpx"
          >
          </image>
          <image
            class="logo"
            src="/static/fx.png"
            style="width: 40rpx; height: 40rpx"
          ></image>
        </navigator>
      </template>
    </u-navbar>
    <view class="my-tab">
      <view
        class="my-tab-item"
        v-for="(item, index) in tabs"
        :ref="`tab${item.name}Ref`"
        :key="index"
        :class="{ active: item.name === activeItem }"
      >
        <view class="my-tab-text" @click="tabClick(item)">{{
          item.label
        }}</view>
      </view>
    </view>
    <view class="tabOnelist" v-if="activeItem == 'tabOne'">
      <view
        class="tabOneitem"
        v-for="(item, i) in farmlist"
        @click="farmdetail(item)"
        :key="i"
      >
        <view class="tabOneitem_left">
          <img :src="item.url" alt="" />
        </view>
        <view class="tabOneitem_right">
          <view class="title">{{ item.title1 }}</view>
          <view class="item_a">
            <img src="../../static/bing.png" alt="" class="img" />
            <text class="score">{{ item.score }}</text>
            <text class="comment">{{ item.num }}条评论</text>
            <text class="tickets">门票￥{{ item.price }}起</text>
          </view>
          <view class="distance">
            <text class="distance1">{{ item.tag }}</text>
            <text class="distance2">{{ item.tag1 }}</text>
            <text class="distance3">{{ item.KM }}KM</text>
          </view>
          <view class="tag">
            <view class="tag_1">{{ item.ranking }}</view>
            <view class="tag_2">{{ item.tag2 }}</view>
          </view>
        </view>
      </view>
    </view>
    <view class="tabTwolist" v-if="activeItem == 'tabTwo'">
      <view
        class="tabTwoitem"
        v-for="(item, i) in groupbuying"
        :key="i"
        @click="grouppurchasedetail(item)"
      >
        <view class="tabTwoitem_left">
          <img :src="item.url" alt="" />
        </view>
        <view class="tabTwoitem_right">
          <view class="title">
            <text class="title_1">{{ item.title }}</text>
            <text class="title_2">{{ item.tag2 }}</text>
          </view>
          <view class="item_a">
            <text class="item_a1">{{ item.tag }}</text>
            <text class="item_a2">{{ item.time }}</text>
            <text class="item_a3">{{ item.num }}份</text>
          </view>
          <view class="price">
            <text class="price_1">￥{{ item.price }}</text>
            <view class="price_2">
              <img src="../../static/gwc.png" alt="" class="gwc" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="tabThreelist" v-if="activeItem == 'tabThree'">
      <view
        class="tabThreeitem"
        v-for="(item, i) in vegetable"
        :key="i"
        @click="vegetabledetail(item)"
      >
        <view class="tabThreeitem_left">
          <img :src="item.url" alt="" />
        </view>
        <view class="tabThreeitem_right">
          <view class="title1">
            <text class="title_1">{{ item.title1 }}</text>
          </view>
          <view class="title">
            <text class="title_1">{{ item.title }}</text>
            <text class="title_2">{{ item.tag2 }}</text>
          </view>
          <view class="item_a">
            <text class="item_a1">{{ item.tag }}</text>
            <text class="item_a2">{{ item.time }}</text>
            <text class="item_a3">{{ item.num }}份</text>
          </view>
          <view class="price">
            <text class="price_1">￥{{ item.price }}</text>
            <view class="price_2">
              <img src="../../static/gwc.png" alt="" class="gwc" />
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activeItem: "tabOne",
      tabs: [
        {
          name: "tabOne",
          label: "农场",
        },
        {
          name: "tabTwo",
          label: "团购",
        },
        {
          name: "tabThree",
          label: "农产品",
        },
      ],
      farmlist: [
        {
          id: 1,
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F4770167%2F9c97c729cd8a46048de83c6637dba2f0.jpeg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvNDc3MDE2Ny85Yzk3YzcyOWNkOGE0NjA0OGRlODNjNjYzN2RiYTJmMC5qcGVn%2Fsign%2Fa7503967a8494a6992f61bb2e2ba434d.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716447911&t=3d25369234e7149f811d7fc0f7411073",
          title: "新农人农庄",
          score: "4.9",
          num: "232",
          price: "56",
          tag: "亲子研学",
          tag1: "黄陂区",
          KM: "18.8",
          ranking: "武汉亲子农场人气榜第一",
          tag2: "踏青赏花",
        },
        {
          id: 2,
          url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fss2.meipian.me%2Fusers%2F4770167%2F9c97c729cd8a46048de83c6637dba2f0.jpeg%3Fmeipian-raw%2Fbucket%2Fivwen%2Fkey%2FdXNlcnMvNDc3MDE2Ny85Yzk3YzcyOWNkOGE0NjA0OGRlODNjNjYzN2RiYTJmMC5qcGVn%2Fsign%2Fa7503967a8494a6992f61bb2e2ba434d.jpg&refer=http%3A%2F%2Fss2.meipian.me&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1716447911&t=3d25369234e7149f811d7fc0f7411073",
          title: "新农人农庄",
          score: "4.8",
          num: "232",
          price: "56",
          tag: "亲子研学",
          tag1: "黄陂区",
          KM: "18.8",
          ranking: "武汉亲子农场人气榜第二",
          tag2: "踏青赏花",
        },
      ],
      groupbuying: [
        {
          id: 1,
          url: "https://img0.baidu.com/it/u=3157982178,3252195413&fm=253&fmt=auto&app=138&f=JPEG",
          title: "[两大一小]亲子采摘",
          tag: "草莓园",
          tag2: "半年售",
          num: "650",
          price: "130",
          time: "周一到周日",
          title1: "新农人农场",
        },
        {
          id: 2,
          url: "https://img0.baidu.com/it/u=3157982178,3252195413&fm=253&fmt=auto&app=138&f=JPEG",
          title: "[两大一小]亲子采摘",
          tag: "蔬菜园",
          tag2: "半年售",
          num: "600",
          price: "110",
          time: "周一到周日",
          title1: "新农人农场",
        },
      ],
      vegetable: [
        {
          id: 1,
          url: "https://img0.baidu.com/it/u=3157982178,3252195413&fm=253&fmt=auto&app=138&f=JPEG",
          title: "[两大一小]亲子采摘",
          tag: "草莓园",
          tag2: "半年售",
          num: "650",
          price: "130",
          time: "周一到周日",
          title1: "新农人农场",
        },
        {
          id: 2,
          url: "https://img0.baidu.com/it/u=1358990883,3965988984&fm=253&fmt=auto&app=138&f=JPEG",
          title: "[两大一小]亲子采摘",
          tag: "蔬菜园",
          tag2: "半年售",
          num: "600",
          price: "110",
          time: "周一到周日",
          title1: "新农人农场",
        },
      ],
    };
  },
  methods: {
    // tab点击
    tabClick(item) {
      this.activeItem = item.name;
      // 触发滑动方法
    },
    farmdetail(item) {
      uni.navigateTo({
        url: "/packageB/productdetails/productdetails?id=" + item.id,
      });
    },
    grouppurchasedetail(item) {
      uni.navigateTo({
        url: "/packageB/productdetails/grouppurchasedetails?id=" + item.id,
      });
    },
    vegetabledetail(item) {
      uni.navigateTo({
        url: "/packageB/productdetails/vegetabledetails?id=" + item.id,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}

.stratview {
  font-family: "Poppins";
  background-color: #f9f9f9;
  position: absolute;
  width: 100%;
  height: 100%;
}

.my-tab {
  width: 100%;
  height: 75rpx;
  line-height: 75rpx;
  display: flex;

  .my-tab-item {
    color: #999999;
    height: 75rpx;
    text-align: center;
    flex: 1;

    &.active {
      color: #333333;

      .my-tab-text {
        position: relative;

        &::after {
          position: absolute;
          left: 50%;
          bottom: 0;
          content: "";
          width: 80rpx;
          height: 4rpx;
          background: linear-gradient(180deg, #f39c12 0%, #f39c12 100%);
          opacity: 1;
          border-radius: 2rpx;
          transform: translateX(-50%);
        }
      }
    }
  }
}

.tabOneitem {
  display: flex;
  height: 160rpx;
  padding: 15rpx;
  margin: 20rpx auto;
  width: 92%;
  border-radius: 20rpx;
  background-color: #fff;

  .tabOneitem_left {
    width: 200rpx;
    margin-right: 15rpx;
    border-radius: 10rpx;
    overflow: hidden;

    img {
      width: 200rpx;
      height: 180rpx;
    }
  }

  .tabOneitem_right {
    flex: 1;

    .title {
      font-size: 26rpx;
      color: #4a4543;
      margin-bottom: 5rpx;
    }

    .item_a {
      display: flex;
      align-items: center;
      margin-bottom: 10rpx;

      .img {
        width: 50rpx;
        height: 50rpx;
      }

      .score {
        font-size: 30rpx;
        color: #eea427;
        display: inline-block;
        margin-right: 20rpx;
      }

      .comment {
        font-size: 26rpx;
        display: inline-block;
        margin-right: 20rpx;
        color: #8d8683;
      }

      .tickets {
        font-size: 26rpx;
        color: #8d8683;
      }
    }

    .distance {
      display: flex;
      font-size: 24rpx;
      color: #8d8683;
      margin-bottom: 20rpx;

      .distance1 {
        display: inline-block;
        margin-right: 20rpx;
      }

      .distance2 {
        flex: 1;
      }
    }

    .tag {
      display: flex;

      .tag_1 {
        padding: 0rpx 8rpx;
        background-color: #eea427;
        border-radius: 20rpx;
        margin-right: 20rpx;
        font-size: 24rpx;
        text-align: center;
        height: 40rpx;
        line-height: 40rpx;
        color: #fff;
      }

      .tag_2 {
        padding: 0rpx 8rpx;
        background-color: #05c160;
        border-radius: 20rpx;
        margin-right: 20rpx;
        font-size: 24rpx;
        text-align: center;
        height: 40rpx;
        line-height: 40rpx;
        color: #fff;
      }
    }
  }
}

// 团购

.tabTwoitem {
  display: flex;
  height: 150rpx;
  padding: 15rpx;
  width: 92%;
  border-radius: 20rpx;
  background-color: #fff;
  margin: 20rpx auto;

  .tabTwoitem_left {
    width: 200rpx;
    margin-right: 15rpx;
    border-radius: 10rpx;
    overflow: hidden;

    img {
      width: 200rpx;
      height: 140rpx;
      border-radius: 10rpx;
    }
  }

  .tabTwoitem_right {
    flex: 1;

    .title {
      display: flex;
      font-size: 28rpx;
      color: #3d3d3d;
      margin-bottom: 15rpx;
      padding-right: 10rpx;

      .title_1 {
        flex: 1;
      }
    }

    .title1 {
      font-size: 28rpx;
      color: #3d3d3d;
    }

    .item_a {
      display: flex;
      align-items: center;
      padding-right: 10rpx;
      margin-bottom: 10rpx;

      .item_a1 {
        font-size: 22rpx;
        color: #adadad;
        display: inline-block;
        margin-right: 20rpx;
      }

      .item_a2 {
        font-size: 22rpx;
        color: #adadad;
        flex: 1;
      }

      .item_a3 {
        font-size: 22rpx;
        color: #8d8683;
      }
    }

    .price {
      display: flex;
      align-items: center;
      padding-right: 10rpx;

      .price_1 {
        font-size: 28rpx;
        color: #3d3d3d;
        flex: 1;
      }

      .price_2 {
        .gwc {
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
  }
}

// 农产品

.tabThreeitem {
  background-color: #fff;
  display: flex;
  height: 170rpx;
  padding: 15rpx;
  margin: 20rpx auto;
  width: 92%;
  border-radius: 20rpx;

  .tabThreeitem_left {
    width: 200rpx;
    margin-right: 15rpx;
    border-radius: 10rpx;
    overflow: hidden;
    display: flex;
    align-items: center;

    img {
      width: 200rpx;
      height: 160rpx;
      border-radius: 10rpx;
    }
  }

  .tabThreeitem_right {
    flex: 1;

    .title {
      display: flex;
      font-size: 28rpx;
      color: #3d3d3d;
      padding-right: 10rpx;

      .title_1 {
        flex: 1;
      }
    }

    .title1 {
      font-size: 28rpx;
      color: #3d3d3d;
    }

    .item_a {
      display: flex;
      align-items: center;
      padding-right: 10rpx;
      margin-bottom: 5rpx;

      .item_a1 {
        font-size: 22rpx;
        color: #adadad;
        display: inline-block;
        margin-right: 20rpx;
      }

      .item_a2 {
        font-size: 22rpx;
        color: #adadad;
        flex: 1;
      }

      .item_a3 {
        font-size: 22rpx;
        color: #8d8683;
      }
    }

    .price {
      display: flex;
      align-items: center;
      padding-right: 10rpx;

      .price_1 {
        font-size: 28rpx;
        color: #3d3d3d;
        flex: 1;
      }

      .price_2 {
        .gwc {
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
  }
}
</style>